<template>
  <!-- 弹窗 -->
  <el-dialog
    ref="dialogRef"
    v-model="showFlag"
    :title="dialogTitle"
    width="50%"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-form-item label="头像" prop="headImg">
        <MyUserHeadImg :modelValue="form.headImg" @getImgUrl="handleImgUrl" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="姓名" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写姓名"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="昵称" prop="nickName">
            <el-input
              v-model="form.nickName"
              placeholder="请填写昵称"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="用户名" prop="username">
            <el-input
              v-model="form.username"
              placeholder="请填写用户名"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              placeholder="请填写密码"
              type="password"
            /> </el-form-item
        ></el-col>
      </el-row>
      <!-- 权限下拉表 -->
      <el-form-item label="角色" prop="roleName">
        <MyUserSelect v-model="form.roleName" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请填写手机号码"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="请填写邮箱"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          resize="none"
          placeholder="请填写备注"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">开启</el-radio>
          <el-radio :label="0">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import eventBus from "@/utils/eventBus";
import MyUserSelect from "@/components/MyUserSelect.vue";
import MyUserHeadImg from "@/components/MyUserHeadImg.vue";
import { getUserAddAPI, getUserEditAPI } from "@/api/userList";
export default {
  components: {
    MyUserHeadImg,
    MyUserSelect,
  },
  data: () => {
    return {
      showFlag: false, //显示弹窗
      dialogTitle: "", //弹窗标题
      //表单数据
      form: {
        id: 0, //用于判断是新增(0)还是编辑
        //上传图片
        headImg: "",
        name: "",
        label: "",
        remark: "",
        menuIdList: [],
        username: "",
        password: "",
        nickName: "",
        phone: "",
        email: "",
        //角色数组
        roleName: [],
        //状态选择单选框
        status: 0,
      },
      //表单规则
      rules: {
        headImg: [
          {
            message: "名称不能为空",
            trigger: ["change", "blur"],
          },
        ],
        username: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: ["change", "blur"],
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: ["change", "blur"],
          },
        ],
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: ["change", "blur"],
          },
        ],
        nickName: [
          {
            required: true,
            message: "昵称不能为空",
            trigger: ["change", "blur"],
          },
        ],
        roleName: [
          {
            required: true,
            message: "角色不能为空",
            trigger: "blur",
          },
        ],
        phone: [
          {
            message: "手机号格式不正确",
            trigger: ["change", "blur"],
            pattern: /^1[3-9]{1}\d{9}$/,
          },
        ],
        email: [
          {
            message: "邮箱格式不正确",
            trigger: ["change", "blur"],
            pattern: /^[1-9a-zA-Z]{5,12}@\w{2,3}\.[a-z]{2,3}$/,
          },
        ],
      },
    };
  },
  mounted() {
    //挂载完成,判断类型
    this.showDialog();
  },
  computed: {
    //判断是否是编辑模式
    isEidtMode() {
      return this.form.id !== 0;
    },
  },
  methods: {
    //根据编辑和新增按钮自动执行
    showDialog() {
      eventBus.on("showDialog", ({ form, dialogTitle, showFlag }) => {
        this.form = form;
        this.showFlag = showFlag;
        this.dialogTitle = dialogTitle;
      });
    },

    //表格新增/编辑的确认验证
    async submitForm() {
      //1. 表单验证
      await this.$refs.ruleFormRef.validate(async (valid, fields) => {
        //表单验证通过
        if (valid) {
          //2. 根据 isEidtMode 来控制调用不同的接口
          if (this.isEidtMode) {
            await getUserEditAPI(this.form);
          } else {
            const { id, ...form } = this.form;
            await getUserAddAPI(form);
          }
          //3. 通知父组件,我好了
          this.$emit("editOrAdd", this.form);
          this.showFlag = false;
        } else {
          //表单验证失败
          console.log("验证失败", fields);
        }
      });
    },
    handleImgUrl(payload) {
      this.form.headImg = payload;
    },
  },
};
</script>
<style scoped>
:deep(.el-form-item .el-form-item__label) {
  display: inline-block;
  width: 80px;
  text-align: right;
}
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
</style>
